<template>
  <div ref="line" class="line" style="width: 100%; height: 90%"></div>
</template>

<script setup>
// 按需引入 echarts
import * as echarts from "echarts";
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const tableData = ref([]);
var xAxislist = [];
// console.log(xAxislist[0],typeof(xAxislist))
onMounted(() => {
  getTableData();
  // chart()
});

const pushData = (obj) => {
  //拿到xAxis  拿到X轴日期
  for (let i = 0; i < obj.length; i++) {
    let content = Number(obj[i].editTime.substring(5, 7));
    let ifhas = xAxislist.indexOf(content);
    if (ifhas === -1) {
      xAxislist.push(content);
    }
  }
  xAxislist.sort();
  for (let i = 0; i < xAxislist.length; i++) {
    // 循环数据类型个数次  拿到月平均数据
    var contentList = getData(xAxislist[i]);
  }

  contentList.then((data) => {  //waiting修改9/15
    chart(xAxislist, data);
  });
};

const getTableData = async () => { //生命周期 启动即生成
  const res = await axios.get("/adminapi/rate/list");
  tableData.value = res.data.data;
  pushData(res.data.data);
};
var pushList = [];
const getData = async (data) => {
  // console.log(data)
  const res = await axios.get(`/adminapi/rate/list4/${data}`);
  var reList = res.data.data;
  var sumnum = 0;

  for (let i = 0; i < reList.length; i++) {
    sumnum += reList[i].tmoney / reList.length;
  }
  pushList.push(sumnum);
  // Object.assign(pushList, sumnum);
  return pushList;
};

const line = ref();
function chart(xAxislist, lsList) {
  // 折线图
  var lineChart = echarts.init(line.value);
  var xdata = xAxislist;
  var lineOption = (lineOption = {
    tooltip: {
      trigger: "axis",
    },

    legend: {
      textStyle: {
        color: "#4c9bfd", // 图例文字颜色
      },
      right: "10%", // 距离右边10%
      // 如果series 里面设置了name，那么此时图里组件的data可以省略！！！
      // data: ['Email', 'Union Ads']
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, //显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false, // 去除轴内间距
      axisTick: {
        show: false, // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd", // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线
      },
      data: xdata,
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, // 去除刻度
      },
      axisLabel: {
        color: "#4c9bfd", // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a", // 分割线颜色
        },
      },
    },
    color: ["#00f2f1", "#ed3f35"], //两条曲线改变颜色
    series: [
      {
        name: "物业费平均费用",
        type: "line",
        smooth: true,
        stack: "总量",
        // data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        data: lsList,
      },
      // {
      //   name: "实际销售额",
      //   type: "line",
      //   smooth: true,
      //   stack: "总量",
      //   // data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      //   data: [40, 64, 191],
      // },
    ],
  });
  lineChart.setOption(lineOption);
}

</script>

<style scoped>
.line {
  width: 500px;
  height: 500px;
}
</style>
